<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入VUE -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>今天天气很{{info}}</h1>
            <button @click="changeWeather">点击切换天气</button>
            <hr>
            <h1>a的值是：{{numbers.a}}</h1>
            <button @click="numbers.a++">a+1</button>
            <h1>b的值是：{{numbers.b}}</h1>
            <button @click="numbers.b++">b+1</button>
        </div>
        <script>
            Vue.config.productionTip = false;// 阻止vue在启动时生成生产提示
            const vm = new Vue({
                el:'#root',
                data:{
                    isHot:true,
                    numbers:{
                        a:1,
                        b:1
                    }
                },  
                methods: {
                    changeWeather(){
                        this.isHot = !this.isHot
                    }
                },  
                computed: {
                    info(){
                        return this.isHot == true ? '凉爽' : '炎热'
                    }
                },
                // watch 第一种方法
                watch: {
                    /* // 正常写法
                    info:{
                        immediate:true,//初始化时让handler调用一下
                        // handler什么时候调用？当info发生改变时就开始调用
                        handler(newValue,oldValue){
                            console.log('info被修改',newValue,oldValue)
                        }
                    },
                    // 监视多级结构中某个属性的变化
                    'numbers.a':{
                        handler(newValue,oldValue){
                            console.log('numbers.a',newValue,oldValue)
                        }
                    },
                    // 监视多级结构中所有属性的变化
                    numbers:{
                        deep:true,//深度监视默认是false  开启后true就是深度监视
                        handler(newValue,oldValue){
                            console.log('numbers改变了',newValue,oldValue)
                        }
                    } */

                    // 简写   不选配置项只要handler的时候可以简写
                    /* info(newValue,oldValue){
                        console.log('info被修改',newValue,oldValue)
                    } */
                }
            })
            /* // watch 第二种方法    正常写法
            vm.$watch('info',{
                immediate:true,//初始化时让handler调用一下
                // handler什么时候调用？当info发生改变时就开始调用
                handler(newValue,oldValue){
                    console.log('info被修改',newValue,oldValue)
                }
            }) */

            // 简写
            vm.$watch('info', function(newValue,oldValue){
                console.log('info被修改',newValue,oldValue)
            })
        </script>
    </body>
</html>